<template>
    <div class="car">  
        <!-- 购物车有内容 -->
        <div class="shopCar-main" v-if="cart.length >= 1">
            <header-layout :showBack="true" pagename="购物车" aria-hidden="true"/>
            <!-- 送货地址 -->
            <div class="shipping-address" @click="onEdit">
                <svg class="icon position" aria-hidden="true">
                        <use xlink:href="#icon-dingwei1"></use>
                </svg>
                <div class="sp-address" >
                    <div class="delv">送货地址</div>
                    <div class="name-adress">
                        <div class="namePhone">
                            <span>张三</span>
                            <span>123456789</span>
                        </div>
                        <div class="detAds"><p>张三省张三市张三省张三市张三省张三市张三省张三市</p></div>
                    </div>

                </div>
                <svg class="icon arrow" aria-hidden="true">
                  <use xlink:href="#icon-xiayiyeqianjinchakangengduo"></use>
                </svg>
            </div>
            <!-- 订单详情 -->
            <div class="order-list">
                <div class="det">
                    <h4>订单详情</h4>
                    <div class="promotions"><span>满减</span><span>满100减5活动</span></div>
                </div>
                <!-- 购物车有数据 -->
                <div class="list">
                    <div class="cont" v-for="product in cart" :key="product.id">
                        <!-- 滑块 -->
                        <van-swipe-cell>
                            <!-- 复选按钮、商品 -->
                            <div class="rightlist">
                                <van-checkbox 
                                checked-color="#00b578"
                                icon-size="20px"
                                width="20px"
                                :value="product.checked"
                                @click="modifyChecked({id:product.id})"
                                ></van-checkbox>
                                <span class="cont-left">
                                    <img v-if="product.img1" :src="product.img1" alt="">
                                    <img v-else :src="product.imgArr[0]" alt="">
                                </span>
                                <span class="cont-right">
                                    <div class="title">
                                        <h3>{{product.goodname}}</h3>
                                        <p>库存{{product.inStock}}件</p>
                                    </div>
                                    <div class="pice">
                                        <span class="pic">￥{{product.price}}</span>
                                        <div class="car">
                                            <span @click="minusOneCart(product.id)" >-</span>
                                            {{product.amount}}
                                            <span @click="plusOneCart(product.id)">+</span>
                                        </div>
                                    </div>
                                </span>
                            </div>
                            <!-- 滑块删除 -->
                            <template #right>
                              <van-button @click="handleRemove(product.id)" square text="删除" type="danger" class="delete-button" style="height: 100%;"/>
                            </template>
                        </van-swipe-cell>
                        
                    </div>
                </div>
                <van-submit-bar 
                :price="totalMoney" 
                :button-text="`结算(${totaAmount}件)`"
                submit-bar-tip-color="#00b578"
                submit-bar-tip-background-color="#00b578" >
                    <van-checkbox checked-color="#00b578"
                    :value="allChecked"
                    @click="modifyAllChecked({allChecked: !allChecked})">
                    全选</van-checkbox>
                </van-submit-bar>
            </div>
            <!-- 提交栏订单 -->
            
        </div>
        

        <!-- 购物车空状态 -->
        <div class="shipNull-main" v-else>
            <header-layout pagename="购物车" aria-hidden="true"/>
            <div>
                <img src="../../images/shoppingCart/3.shoppingCartNull.png" alt="">
            </div>
            <button @click="goHome">去首页逛逛</button>
        </div>

        
    </div>
</template>
<script>
    import { Toast } from 'vant';
    import { mapMutations, mapGetters } from 'vuex'
    export default {
        // data(){
        //     return {
        //         readOnly:{
        //             type:Boolean,
        //             default:false
        //         }
        //     }
        // },
        computed: {
            /**
             * 获取在store中保存的购物车数组
             */
            cart() {
                return this.$store.state.cartModule.cart
            },
            ...mapGetters('cartModule',['allChecked','totalMoney','totaAmount']),
        },
        methods: {
            ...mapMutations('cartModule', ['modifyChecked','modifyAllChecked',"pushOne","minusOne","removeFromCart"]),
            // 收货地址编辑
            onEdit() {
              Toast('编辑');
            },
            //购物车空状态,去首页逛逛
            goHome(){
              this.$router.push('/home')
            },
            // 购物车数量加1
            plusOneCart(id){
                console.log(123);
                // console.log("prod",prod);
                //结构当前商品详情中的各属性
                // const { id } = prod
                //保存到store中
                //组件中不能直接调用到mutation方法，需要使用store.commit()提交mutation
                // this.$store.commit('cartModule/pushOne',{id})
                this.pushOne({id})
            },
            //数量减一
            minusOneCart(id){
                // const { id } = prod
                //构建当前选购的商品对象
                
                // prod.amount -= 1 
                // if(prod.amount <= 1){
                //     // this.readOnly = true
                //     prod.amount = 1
                // }
                // const currentProduct ={
                //     id,
                //     amount:prod.amount
                // }
                // console.log(';;;;;',prod.amount);
                // this.$store.commit('cartModule/minusOne',{id})
                // console.log('///////////',this.$store.state.cartModule.cart);
                this.minusOne({id})
            },
            //删除
            handleRemove(id){
                this.removeFromCart({id})
            }
        },
    }
</script>
<style lang="less" scoped>
    @import '../../style/shoppingCart.less';
    header{
        background-color: @blockbdcolor;
        
        text-align: center;
        span{
            font-size: 1.1rem;
        }
    }
</style>